<template>
	<div class="counter-box"
		:style="{ backgroundImage: 'url(' + getAssetsFile(legend.bg) + ')', backgroundSize: '100% 100%' }">
		<input type="number" class="custom-number-input" v-model="inputValue"
			:class="legend.unit == '亿元' ? 'unitWidth' : 'unitWidths'"
			:style="{ color: legend.fontColor, '::placeholder': { color: legend.fontColor }, fontWeight: 'bold' }"
			@blur="handleBlur" @keydown.enter="handleEnter">
		<div class="counter-box-right">
			<div class="counter-unit">{{ legend.unit }}</div>
			<div class="counter-img">
				<img :src="getAssetsFile(legend.topBg)" alt="" @click="increment()">
				<img :src="getAssetsFile(legend.bottom)" alt="" @click="decrement()">
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount, watch, watchEffect, defineEmits } from 'vue';

// 接收参数
const props = defineProps({
	legend: {
		type: Object,
		default: () => { },
	},
});
const emit = defineEmits(['setInputValue'])
const legend = ref(props.legend)
const inputValue = ref(props.legend.value)
const setp = ref(props.legend.setp)

watch(() => props.legend, (newValue) => {
	inputValue.value = props.legend.value
}, { deep: true });

//动态引入图片
const getAssetsFile = (url: string) => {
	return new URL(`../../assets/img/landSupply/${url}`, import.meta.url).href
}

//加
const increment = () => {
	inputValue.value = inputValue.value + setp.value
	emit('setInputValue', { inputValue: inputValue.value, unit: legend.value.unit })
}
//减
const decrement = () => {
	if (inputValue.value == 0) return
	inputValue.value = inputValue.value - setp.value
	emit('setInputValue', { inputValue: inputValue.value, unit: legend.value.unit })
}

//input失去焦点
const handleBlur = () => {
	if (inputValue.value <= 0) return
	emit('setInputValue', { inputValue: inputValue.value, unit: legend.value.unit })
};
//enter事件
const handleEnter = () => {
	if (inputValue.value <= 0) return
	emit('setInputValue', { inputValue: inputValue.value, unit: legend.value.unit })
}

onMounted(() => {

})
</script>

<style lang="less" scoped>
.counter-box {
	width: 109px;
	height: 34px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 6px 9px;
	box-sizing: border-box;

	.counter-box-right {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.counter-unit {
			font-size: 14px;
			white-space: nowrap;
		}

		.counter-img {
			margin-left: 5px;
			padding-top: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 25px;

			img {
				width: 14px;
				height: 8px;
			}

			img:last-child {
				position: relative;
				bottom: 4px;
			}
		}

	}
}

.unitWidth {
	width: 46px;
}

.unitWidths {
	width: 60px;
}

input {
	background-color: rgba(0, 0, 0, 0);
	border: 1px solid rgba(0, 0, 0, 0);
	font-size: 12px;
	/* 可选：添加边框样式 */
	padding: 5px;
	/* 可选：添加内边距 */
}

input::placeholder {
	/* 设置提示文字颜色为红色 */
}

input {
	/* 设置输入文字颜色为蓝色 */
	border: rgba(0, 0, 0, 0);
	/* 可选：添加边框样式 */
	padding: 5px;
	/* 可选：添加内边距 */
}

.custom-number-input {
	-webkit-appearance: textfield;
	/* 隐藏默认的加减数图标 */
	appearance: textfield;
	/* 隐藏默认的加减数图标 */
}

.custom-number-input::-webkit-inner-spin-button,
.custom-number-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	/* 隐藏默认的加减数图标 */
	appearance: none;
	/* 隐藏默认的加减数图标 */
	margin: 0;
	/* 可选：设置边距为0 */
}
</style>